<template>
  <div class="app-container">
    <!-- 搜索工作栏 -->
    <el-form class="tabelForm" :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="发货单号" prop="code">
        <el-input v-model="queryParams.code" placeholder="请输入发货单号" clearable @keyup.enter.native="handleQuery"/>
      </el-form-item>
<!--      <el-form-item label="参照单号" prop="refereCode">-->
<!--        <el-input v-model="queryParams.refereCode" placeholder="请输入参照单号" clearable-->
<!--                  @keyup.enter.native="handleQuery"/>-->
<!--      </el-form-item>-->
      <el-form-item label="所在仓库" prop="warehouseId">
        <el-select v-model="queryParams.warehouseId" placeholder="请选择所在仓库" clearable size="small">
          <el-option v-for="warehouse in warehouseList" :key="warehouse.id" :label="warehouse.name"
                     :value="warehouse.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable size="small">
          <el-option v-for="dict in this.getDictDatas(DICT_TYPE.SHIP_ORDER_STATUS)"
                     :key="dict.value" :label="dict.label" :value="dict.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="仓库分类" prop="type">
        <el-select v-model="queryParams.type" placeholder="请选择仓库分类" clearable size="small">
          <el-option v-for="dict in this.getDictDatas(DICT_TYPE.WAREHOUSE_TYPE)"
                     :key="dict.value" :label="dict.label" :value="dict.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间" prop="createTime">
        <el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss"
                        type="daterange"
                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
                        :default-time="['00:00:00', '23:59:59']"/>
      </el-form-item>
      <el-form-item label="直发客户" prop="isDirect">
        <el-select v-model="queryParams.isDirect" placeholder="请选择是否直发客户" clearable size="small">
          <el-option v-for="dict in this.getDictDatas(DICT_TYPE.IS_DIRECT)"
                     :key="dict.value" :label="dict.label" :value="dict.value"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 操作工具栏 -->
    <div class="toolbarBox">
      <div class="left-toolbar">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="medium"
          @click="openShipOrderForm()"
          v-hasPermi="['hs:ship-order:create-manual']"
        >出库
        </el-button>
        <el-button
          type="default"
          icon="el-icon-download"
          size="medium"
          @click="handleExport"
          :loading="exportLoading"
          v-hasPermi="['hs:ship-order:export']"
        >导出
        </el-button>
        <div class="toolsbtn">
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </div>

      </div>
      <div class="right-toolbar">
        <!-- 分页组件 -->
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNo"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
          layout="prev, pager, next"
          :background="false"
        />
      </div>
    </div>

    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
      <el-table-column label="序号" align="center" type="index" width="50"/>
      <el-table-column label="发货单号" align="center" prop="code"/>
<!--      <el-table-column label="参照单号" align="center" prop="refereCode" width="150"/>-->
      <el-table-column label="发货仓库" align="center" prop="warehouseId" :formatter="warehouseFormat" width="150"/>
      <el-table-column label="收货仓库" align="center" prop="toWarehouseId" :formatter="toWarehouseFormat" width="150"/>
      <el-table-column label="终端客户仓库" align="center" prop="customerId" :formatter="toCustomerFormat" width="150"/>
      <el-table-column label="状态" align="center" prop="status">
        <template v-slot="scope">
          <dict-tag :type="DICT_TYPE.SHIP_ORDER_STATUS" :value="scope.row.status"/>
        </template>
      </el-table-column>
      <el-table-column label="仓库分类" align="center" prop="warehouseType">
        <template v-slot="scope">
          <dict-tag :type="DICT_TYPE.WAREHOUSE_TYPE" :value="scope.row.warehouseType"/>
        </template>
      </el-table-column>
      <el-table-column label="直发客户" align="center" prop="isDirect">
        <template v-slot="scope">
          <dict-tag :type="DICT_TYPE.IS_DIRECT" :value="scope.row.isDirect"/>
        </template>
      </el-table-column>
      <el-table-column label="创建人" align="center" prop="creatorName" />
      <el-table-column label="创建时间" align="center" prop="createTime" width="200">
        <template v-slot="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="出库时间" align="center" prop="createTime" width="200">
        <template v-slot="scope">
          <span>{{ parseTime(scope.row.transportingTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template v-slot="scope">
          <el-button v-show="scope.row?.status === 'NEW'" size="mini" type="text" icon="el-icon-plus"
                     @click="openCreatePickTask(scope.row.code)" v-hasPermi="['hs:ship-order:create-pick-task']">创建任务
          </el-button>
          <!--          <el-button size="mini" type="text" icon="el-icon-edit" @click="openForm(scope.row.id)"-->
          <!--                     v-hasPermi="['hs:ship-order:update']">修改-->
          <!--          </el-button>-->
          <el-button v-show="scope.row?.status === 'PICK_OVER'" size="mini" type="text" icon="el-icon-truck"
                     @click="ship(scope.row.id)" v-hasPermi="['hs:ship-order:ship']">出库
          </el-button>
          <el-button size="mini" type="text" icon="el-icon-info"
                     @click="openShipOrderDetail(scope.row.code)" v-hasPermi="['hs:ship-order:query']">详情
          </el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
                     v-hasPermi="['hs:ship-order:delete']">撤回
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 对话框(详情) -->
    <ShipOrderDetailList ref="detailRef" @success="getList"/>
    <!-- 对话框(出库单) -->
    <ShipOrderForm ref="shipOrderFormRef" @success="getList"/>
    <!-- 对话框(三方出库单) -->
    <ShipOrderTripartiteForm ref="shipOrderTripartiteFormRef" @success="getList"/>
    <!-- 对话框(创建拣货任务) -->
    <CreatePickTask ref="createPickTaskRef" @success="getList"/>
    <!-- 对话框(出库单详情) -->
    <ShipOrderDetail ref="shipOrderDetailRef" @success="getList"/>
  </div>
</template>

<script>
import * as ShipOrderApi from '@/api/hs/shiporder';
import ShipOrderForm from './ShipOrderForm.vue';
import {getWarehouse, getWarehouseSimpleList} from "@/api/hs/warehouse";
import ShipOrderDetailList from "@/views/hs/componnets/ShipOrderDetailList.vue";
import CreatePickTask from "@/views/hs/componnets/CreatePickTask.vue";
import {ship} from "@/api/hs/shiporder";
import ShipOrderTripartiteForm from "@/views/hs/shiporder/ShipOrderTripartiteForm.vue";
import ShipOrderDetail from "@/views/hs/shiporder/ShipOrderDetail.vue";
import {getCustomerSimpleList} from "@/api/hs/customer";


export default {
  name: "ShipOrder",
  components: {
    ShipOrderDetailList,
    CreatePickTask,
    ShipOrderForm,
    ShipOrderTripartiteForm,
    ShipOrderDetail,
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 出库单列表
      list: [],
      // 是否展开，默认全部展开
      isExpandAll: true,
      // 重新渲染表格状态
      refreshTable: true,
      // 选中行
      currentRow: {},
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        code: null,
        // refereCode: null,
        warehouseId: null,
        status: null,
        type: null,
        createTime: [],
        warehouseType: 'PRODUCTION',
        isDirect: null,
      },
      warehouseList: [],
      customerList: [],
    };
  },
  async created() {
    await this.getWarehouseList();
    await this.getCustomerList();
    await this.getList();
  },
  methods: {
    /** 查询列表 */
    async getList() {
      try {
        this.loading = true;
        const res = await ShipOrderApi.getShipOrderPage(this.queryParams);
        this.list = res.data.list;
        this.total = res.data.total;
      } finally {
        this.loading = false;
      }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 创建三方仓出库单 */
    openShipOrderTripartiteForm() {
      this.$refs["shipOrderTripartiteFormRef"].open();
    },
    /** 创建出库单 */
    openShipOrderForm() {
      this.$refs["shipOrderFormRef"].open();
    },
    /** 删除按钮操作 */
    async handleDelete(row) {
      if (row.status === 'TRANSPORTING') {
        this.$modal.msgError("运输中状态的出库单无法撤回");
        return;
      }
      if (row.status === 'RECEIVED') {
        this.$modal.msgError("已收货状态的出库单无法撤回");
        return;
      }
      const code = row.code;
      await this.$modal.confirm('是否确认撤回出库单编号为"' + code + '"的数据项?')
      try {
        await ShipOrderApi.deleteShipOrder(row.id);
        await this.getList();
        this.$modal.msgSuccess("删除成功");
      } catch {
      }
    },
    /** 导出按钮操作 */
    async handleExport() {
      await this.$modal.confirm('是否确认导出所有出库单数据项?');
      try {
        this.exportLoading = true;
        const data = await ShipOrderApi.exportShipOrderExcel(this.queryParams);
        this.$download.excel(data, '出库单.xls');
      } catch {
      } finally {
        this.exportLoading = false;
      }
    },
    /** 查询仓库列表 */
    async getWarehouseList() {
      getWarehouseSimpleList().then(res => {
        this.warehouseList = res.data;
      })
    },
    /** 查询客户列表 */
    async getCustomerList() {
      getCustomerSimpleList().then(res => {
        this.customerList = res.data;
      })
    },
    // 仓库名称展示
    warehouseFormat(row, column) {
      if (!row.warehouseId) {
        return '未设置';
      }
      for (const warehouse of this.warehouseList) {
        if (row.warehouseId === warehouse.id) {
          return warehouse.name;
        }
      }
      return '未知【' + row.warehouseId + '】';
    },
    toWarehouseFormat(row, column) {
      if (!row.toWarehouseId) {
        return '-';
      }
      for (const warehouse of this.warehouseList) {
        if (row.toWarehouseId === warehouse.id) {
          return warehouse.name;
        }
      }
      return '未知【' + row.toWarehouseId + '】';
    },
    toCustomerFormat(row, column) {
      if (!row.customerId) {
        return '-';
      }
      console.log(row.customerId);
      for (const customer of this.customerList) {
        if (row.customerId === customer.id) {
          return customer.customerName;
        }
      }
      return '未知【' + row.customerId + '】';
    },
    /** 打开出库单详情 */
    openShipOrderDetail(shipOrderCode) {
      this.$refs["detailRef"].open(shipOrderCode);
    },
    /** 打开出库单详情 */
    openPickTaskMaterialDetail(shipOrderId) {
      this.$refs["shipOrderDetailRef"].open(shipOrderId);
    },
    /** 打开创建拣货任务对话框 */
    openCreatePickTask(shipOrderCode) {
      this.$refs["createPickTaskRef"].open(shipOrderCode);
    },
    /** 出库，修改出库单状态为出库中 */
    ship(shipOrderId) {
      ship(shipOrderId).then(res => {
        if (res.data) {
          this.$modal.msgSuccess("出库成功！");
          this.getList();
        }
      })
    }
  }
};
</script>
